<template>

  <div class="tab_nav_bg" >
    <div  class="flex_center">
      <van-icon name="arrow-left" class="nav_left_icon" @click="$router.go(-1)"  size="18px"/>
      <div style="flex: 1;text-align: center">{{$route.query.payChannel + ' '+ $t('还款')}}</div>
    </div>
  </div>
  <div class="wrapper">
    <div class="card">
      <div style="padding: 15px 0;font-size: 20px">{{ $t('剩余应还金额') }}</div>
      <div class="card_amount">
        ₱{{ repaymentInfo.amount }}
      </div>
    </div>
    <div class="qrCode_card">
      <div style="padding: 15px;text-align: center">
          <div style="padding: 10px 0">
            <qrcode-vue v-if="repaymentInfo.accNo" class="qrCode_img " :size="250" :value="repaymentInfo.accNo"  ></qrcode-vue>
          </div>
        <div style="padding: 15px 0;background-color: #c5faef;color:#15B3B2;font-size: 20px;border-radius: 10px;margin-top: 10px">
          {{repaymentInfo.accNo}}
        </div>
        <div style="margin-top: 30px;text-align: center;">
          <van-button type="primary" @click="copyPayCode" round style="width: 100%">{{ $t('复制还款二维码') }}</van-button>
        </div>
      </div>

    </div>
    <div class="card">
      <div class="step_title">Repayment Guidelines</div>
      <div class="steps_item" v-for="(item,index) in repayChannelInfo.guideUrlList" :key="item">
        <img class="step_content_img" :src="item">
      </div>
    </div>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";
import {useStore} from "vuex";
import {Dialog, Toast} from "vant";
import {fetchVirtualCard, fetchBankRemark, fetchRepaymentType} from '@/api/order'
import {useRoute} from "vue-router";
import {useI18n} from "vue-i18n"
import QrcodeVue from 'qrcode.vue'
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
    QrcodeVue
  },
  setup() {
    const store = useStore()
    const route = useRoute()
    const repayAmount = ref(null)
    const repaymentInfo = ref({})
    const repayChannelInfo = ref({})
    const {t} = useI18n()
    const {loanRecordId, amount,payChannel,channelType} = route.query
    const fetchCardPay = async () => {
      const res = await fetchVirtualCard({loanRecordId})
      if (res.code === 1 && res.data) {
        repaymentInfo.value = {...res.data, amount: amount}
      }
      // 清除loading
      store.dispatch('changeLoading', false)
    }

    function editAmountConfirm(active) {
      return new Promise((resolve, reject) => {
        if (active === 'cancel') {
          resolve(true)
        } else {
          reject(false)
        }
      })

    }

    function copyPayCode() {
      const text = repaymentInfo.value.accNo
      if (text) {
        let input = document.createElement("input");
        input.value = text
        document.body.appendChild(input);
        input.select()
        document.execCommand('copy')
        Toast({
          message: t('复制成功')
        })
        document.body.removeChild(input);
      }
    }
    async function getRepayment() {
      const res = await fetchRepaymentType({
        productName:localStorage.getItem('productName')
      })
      if (res.code === 1) {
        repayChannelInfo.value = res.data.find(item => item.channelCode === payChannel && item.channelType === channelType) || {}
      }
    }

    onMounted(() => {
      fetchCardPay()
      getRepayment()
    })
    return {
      copyPayCode,
      repaymentInfo,
      repayChannelInfo,
      repayAmount,
      editAmountConfirm
    }
  }
}
</script>

<style lang="less" scoped>

.qrCode_img {
  height: 265px!important;
  width: 100%!important;
  padding: 15px 20px;
  box-sizing: border-box;
}
.wrapper {
  position: relative;
  padding: 15px;
  margin-top: -150px;
  .card {
    box-sizing: border-box;
    padding: 15px;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin-bottom: 15px;
    .steps_item {
      background-color: #FFFBED;
      padding: 10px;
      margin: 20px 20px  0 20px;
      box-sizing: border-box;
      border-radius: 6px;
      .step_content_img{
        height: 300px;
        width: 240px;
      }
    }
    .step_title {
      padding: 10px;
      box-sizing: border-box;
      font-size: 20px;
    }
    .step_tips {
      text-align: left;
      color: #99503D;
      line-height: 36px;
      margin-bottom: 15px;
    }

    .card_amount {
      color: #E79A00;
      border-radius: 6px;
      margin: 0 auto;
      font-size: 40px;
      padding: 10px 0;
    }

    .card_item {
      padding: 8px 15px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
    }
  }





  .qrCode_card {
    margin-top: 20px;
    background-color: #ffffff;
    font-size: 16px;
    border-radius: 6px;
    margin-bottom: 20px;
  }
}
</style>